<template>
	<view class="content">
		<view v-if="isLoading" style="display: flex;justify-content: center;align-items: center;" :style="{height: windowHeight + 'px'}">
			<image style="width:50px;height: 50px;" src="../../static/images/loading.gif"></image>
		</view>
		<view v-else>
			<view class="topbox mask_mask">
				<helang-blur :params="params"></helang-blur>
				<image v-if="userinfo.avatar_file == null" class="face mask_mask" src="https://www.yedushu.cn/usersface/default/avatar-min.png"></image>
				<image v-else class="face mask_imgboxmask" :src="'https://www.yedushu.cn/' + userinfo.avatar_file"></image>
			</view>
			<view class=" userbox">
				<view class="user">
					<text class="name">{{userinfo.user_name}}</text>
					<text v-if="userinfo.city != null && userinfo.city != ''" class="city">{{userinfo.province}}·{{userinfo.city}}</text>
				</view>
				<view class="edit" v-if="isMyself">
					<text class="editfont" @click="editmyself()">编辑个人资料</text>
				</view>
			</view>
			<view class="itembox">
				<scroll-view class="" scroll-x="true" show-scrollbar="true">
					<view class="tab">
						<view class="item" @click="bags()">
							<view class="imgbox">
								<image class="img" src="../../static/images/ic_tab_market.png"></image>
							</view>
							<view class="itemtxt">
								<view class="title">进入书包</view>
								<view class="memo">发现超值好书</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view v-if="(zaidus.total != 0) || (xiangdus.total != 0) || (duguos.total != 0)">
				<view class="readbox jianju" v-if="zaidus.total != 0">
					<view class="du">
						<text class="txtfont">在读({{zaidus.total}})</text>
						<navigator :url="'../userhome/readstate?readstate=2&uid=' + uid" class="chakan">
							<text class="txtfont">查看全部</text>
						</navigator>
					</view>
					<view class="books">
						<view class="bookslist">
							<scroll-view class="" scroll-x="true" >
								<image v-for="(zaidu,index) in zaidus.data" :key="index" class="bookpic" :src="'https://www.yedushu.cn/' + zaidu.books.bimg"></image>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="readbox line" v-if="xiangdus.total != 0">
					<view class="du">
						<text class="txtfont">想读({{xiangdus.total}})</text>
						<navigator :url="'../userhome/readstate?readstate=1&uid=' + uid" class="chakan">
							<text class="txtfont">查看全部</text>
						</navigator>
					</view>
					<view class="books">
						<view class="bookslist">
							<scroll-view class="" scroll-x="true" >
								<image v-for="(xiangdu,index) in xiangdus.data" :key="index" class="bookpic" :src="'https://www.yedushu.cn/' + xiangdu.books.bimg"></image>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="readbox line" v-if="duguos.total != 0">
					<view class="du">
						<text class="txtfont">读过({{duguos.total}})</text>
						<navigator :url="'../userhome/readstate?readstate=3&uid=' + uid" class="chakan">
							<text class="txtfont">查看全部</text>
						</navigator>
					</view>
					<view class="books">
						<view class="bookslist">
							<scroll-view class="" scroll-x="true" >
								<image v-for="(duguo,index) in duguos.data" :key="index" class="bookpic" :src="'https://www.yedushu.cn/' + duguo.books.bimg"></image>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<image class="emptyimg" src="../../static/images/ic_new_empty_view_default.png"></image>
				<view class="txt">暂时没有活动痕迹</view>
			</view>
			<view class="bottom">
				<text class="nian">{{join_Year}}</text>
				<text class="yue">{{join_Month}}</text>
				<text class="title">-- 加入 --</text>
			</view>
		</view>
	</view>
</template>

<script>
	import helangBlur from "@/components/helang-blur/helang-blur.vue";
	import formatJoinDate from '../../components/formatJoinDate/formatJoinDate.js';
	export default {
		components:{
			helangBlur
		},
		data() {
			return {
				params:{
					width:'100%',
					height:'310px',
					image: '',
					blur: "xl",
					windowHeight: 0, // 可使用窗口高度
				},
				
				zaidus: [], // 在读
				xiangdus: [], // 想读
				duguos: [], // 读过
				uid: '', //用户uid
				userinfo: [], // 用户信息
				join_Month: '', // 加入月份
				join_Year: '', // 加入年份
				isMyself: false, // 判断是否查看自己的主页
				isLoading: false,
				
				userinfo_api: false,
				zaidus_api: false,
				xiangdus_api: false,
				duguos_api: false
				
			}
		},
		onShow() {
			// 监听设置昵称页面（setnick.vue）传过来的事件，更新用户昵称显示
			uni.$on("setnick", res => {
			    this.userinfo.user_name = res.username;
			    // 移除全局自定义事件监听器
			    // uni.$off('setnick');
			});
			
			// 监听设置城市页面（subcity.vue）传过来的事件，更新城市显示
			uni.$on("setcity", res => {
				this.userinfo.province = res.sheng;
				this.userinfo.city = res.shi;
			    // 移除全局自定义事件监听器
			    uni.$off('setcity');
			});
		},
		onLoad(option) {
			// 等待加载数据
			this.isLoading = true;
			
			// 用户的uid
			// console.log(option.uid);
			this.uid = option.uid;
			
			// 标题显示用户名字
			uni.setNavigationBarTitle({
			    title: option.username
			});
			
			// 判断是否登录
			const haslogin = uni.getStorageSync('haslogin');
			const userinfo = uni.getStorageSync('userinfo');
			// console.log(JSON.stringify(userinfo));
			if(haslogin)
			{
				// 如果登录了，检测是否查看的自己的个人主页
				if(option.uid == userinfo.uid)
				{
					this.isMyself = true;
				}
			}
			
			Promise.all([this.getUserinfo(),this.getRead(1),this.getRead(2),this.getRead(3)]).then((res)=>{
				// console.log(JSON.stringify(res[0]));
				this.userinfo = res[0];
				// console.log(JSON.stringify(res[0].avatar_file));
				if(res[0].avatar_file == '' || res[0].avatar_file == null)
				{
					this.params.image = 'https://www.yedushu.cn/images/mobile/uhome_bg.jpg' // 背景图
				}
				else {
					this.params.image = 'https://www.yedushu.cn/' + res[0].avatar_file; // 背景图片			
				}
				
				// 加入年份
				this.join_Year = formatJoinDate(res[0].reg_time).Year;
				// 加入月份
				this.join_Month = formatJoinDate(res[0].reg_time).Month;
				
				this.xiangdus = res[1];
				this.zaidus = res[2];
				this.duguos = res[3];
				
				this.isLoading = false;
			})
			
			// 获得设备
			var _this = this;
			uni.getSystemInfo({
			    success: function (res) {
			        // console.log(res.windowHeight);
					_this.windowHeight = res.windowHeight;
			    }
			});
		},
		methods: {
			getUserinfo() {
				// 获得用户的信息				
				return new Promise((resolve, reject) => {					
					uni.request({
					    url: 'https://www.yedushu.cn/api/userinfo/' + this.uid,
					    success: (res) => {
					        // console.log(JSON.stringify(res.data));
							resolve(res.data);
					    }
					});
				});
			},
			getRead(state) {
				// 获得读书列表，1想读 2在读 3读过
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://www.yedushu.cn/api/readstate/' + state +'/' + this.uid,
						success: (res) => {
							// console.log(JSON.stringify(res.data));
							if(state == 1) {
								// this.xiangdus = res.data;
								resolve(res.data);
							}
							if(state == 2) {
								// this.zaidus = res.data;
								resolve(res.data);
							}
							if(state == 3) {
								// this.duguos = res.data;
								resolve(res.data);
							}
						}					
					});
				});
			},
			editmyself() {
				// 跳转到编辑个人资料
				uni.navigateTo({
					url: '../login/setmyself'
				})
			},
			bags() {
				// 打开书友对应的书城
				uni.navigateTo({
					url: '../books/usersbags?uid=' + this.uid + '&username=' + this.userinfo.user_name
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F8F8F8;
	}
	.content {
		display: flex;
		flex-direction: column;
	}
	.topbox {
		/* display: flex; */
		/* padding: 10px 0; */
		/* background-color: #3F536E; */
		/* justify-content:center; // 水平 */
		/* align-items: center; // 垂直		 */
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
	}
	.mask_mask {
		/*遮罩*/
	    width: 100%;
	    height: 200px;
	    z-index: 1;
	}
	.topbox .face {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		border: solid 3px rgba(255,255,255,0.8);		
		position:absolute;
		margin: auto;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
	}
	.userbox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10px 15px;
		background-color: #FFFFFF;
	}
	.userbox .user {
		display: flex;
		flex-direction: column;
	}
	.userbox .user .name {
		font-size: 20px;
		font-weight: 700;
	}
	.userbox .user .city {
		font-size: 14px;
	}
	.userbox .edit {
		border: 1px solid #4CD964;
		padding: 5px 5px;
		border-radius: 5px;
	}
	.userbox .edit .editfont {
		font-size: 14px;
		color: #4CD964;
	}
	.jianju {
		margin-top: 5px;
	}
	.line {
		margin-top: 1px;
	}
	.readbox {		
		padding: 10px 15px;		
		background-color: #FFFFFF;
	}
	.readbox .du {
		display: flex;
		justify-content: space-between;	
	}
	.readbox .du .txtfont {
		font-size: 14px;
	}
	.readbox .books {
		padding: 10px 0px;
	}
	.readbox .books .bookslist {
		align-items: center;
		justify-content: center;
		white-space: nowrap; // 滚动必加
	}
	.readbox .books .bookpic {
		width: 70px;
		height: 90px;
		border-radius: 5px;
		padding: 0 5px;
	}
	.bottom {
		padding: 20px 15px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.bottom .nian {
		font-size: 16px;
	}
	.bottom .yue {
		font-size: 15px;
		padding: 5px 0;
	}
	.bottom .title {
		font-size: 10px;
	}
	.empty {
		background-color: #FFFFFF;
		padding: 20px 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.empty .emptyimg {
		width: 140px;
		height: 120px;
	}
	.empty .txt {
		font-size: 14px;
	}
	.itembox {
		background-color: #FFFFFF;
		padding: 10px 10px;
	}	
	.itembox .tab {
		display:flex; 
		flex-direction: row;
		white-space: nowrap;
	}
	.itembox .item {
		display: flex;
		flex-direction: row;
		padding-right: 10px;
	}
	.itembox .item .imgbox {
		background-color: #F2F2F2;
		padding: 4px 6px;
		border-radius: 5px;
	}
	.itembox .item .img {
		height: 30px;
		width: 30px;
	}
	.itembox .item .itemtxt {
		display: flex;
		flex-direction: column;
		padding-left: 6px;
	}
	.itembox .item .title {
		font-size: 15px;
	}
	.itembox .item .memo {
		font-size: 12px;
		color: #808080;
	}
</style>
